<template>
  <div class="login">
    <div class="LBox">
      <div class="TopImg">
        <img
          src="https://img1.baidu.com/it/u=3178057158,4110048229&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1667149200&t=61d3b687f4917347ef0d59f24f9317f6"
          alt="">
      </div>
      <el-form :model="Form" :rules="rules" ref="Form" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="Form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="Form.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' style="margin-left:120px;" @click="submitForm('Form')">登录</el-button>
          <el-button @click="resetForm('Form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      Form: {
        username: '',
        password: ''
      },
      // 表单规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
      },
    };
  },
  created() { },
  mounted() { },
  methods: {
    // 登录
    // submitForm(formName) {
    //     this.$refs[formName].validate(async(valid) => {
    //       if (valid) {
    //        const res = await this.$http.login(this.Form)
    //        console.log(res);
    //        this.$router.push('/about')
    //       } else {
    //         console.log('error submit!!');
    //         return false;
    //       }
    //     });
    //   },
    //   // 重置
    //   resetForm(formName) {
    //     this.$refs[formName].resetFields();
    //   }
    submitForm(formName) {
      //函数防抖,防止用户多次点击提交接口
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$refs[formName].validate(async (valid) => {
          //验证通过
          if (valid) {
            //对接口统一封装到http请求里，不同接口路径也封装下，这样便于维护接口
            let res = await getLogin(this.ruleForm);
            if (res.meta.status === 200) {
              this.$message.success(res.meta.msg);
              localStorage.setItem("token", res.data.token);
              //加载动态路由
              this.loadRoute();
              this.$router.push("/home");
            }
          }
          //验证不通过
          else {
            return false;
          }
        });
      }, 300);
    },
    //重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //动态路由方法
    async loadRoute() {
      //请求路由结构数据
      let res = await menusList();
      //判断
      if (res.meta.status === 200) {
        //把路由表提炼成一个公共方法
        localStorage.setItem("menusList", JSON.stringify(res.data));
        let newList = fn(res.data);
        console.log("递归后的列表路由", newList);
        newList.forEach((item) => {
          this.$router.addRoute("Home", item);
        });
      }
    },

    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },

    ...mapActions(["setLogin1"]),
  },
  // 页面渲染之前执行
};
</script>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-color: #dd001b;
  display: flex;
  justify-content: center;
  align-items: center;

  .LBox {
    width: 500px;
    height: 300px;
    background-color: #ffff;
    position: relative;
    box-sizing: border-box;
    padding: 40px;
  }

  .TopImg {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: absolute;
    left: 36%;
    top: -83px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>
